<template>
  <div class="counter-demo">
    <h1>Counter Store 读写示例</h1>

    <!-- 显示当前状态 -->
    <div class="status-section">
      <h2>当前状态</h2>
      <div class="status-item">
        <strong>性别:</strong> {{ counterStore.gender || '未设置' }}
      </div>
      <div class="status-item">
        <strong>服装:</strong> {{ counterStore.outfit || '未设置' }}
      </div>
      <div class="status-item">
        <strong>地点:</strong> {{ counterStore.location || '未设置' }}
      </div>
      <div class="status-item">
        <strong>API域名:</strong> {{ counterStore.apiDomain || '未设置' }}
      </div>
      <div class="status-item">
        <strong>清除历史标志:</strong> {{ counterStore.clearHistoryFlag }}
      </div>
    </div>

    <!-- 设置性别 -->
    <div class="form-section">
      <h2>设置性别</h2>
      <select v-model="genderInput" @change="setGender">
        <option value="">请选择性别</option>
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>

    <!-- 设置服装 -->
    <div class="form-section">
      <h2>设置服装</h2>
      <input type="text" v-model="outfitInput" placeholder="输入服装描述" @keyup.enter="setOutfit" />
      <button @click="setOutfit">设置服装</button>
    </div>

    <!-- 设置地点 -->
    <div class="form-section">
      <h2>设置地点</h2>
      <input type="text" v-model="locationInput" placeholder="输入地点" @keyup.enter="setLocation" />
      <button @click="setLocation">设置地点</button>
    </div>

    <!-- 清除历史标志 -->
    <div class="form-section">
      <h2>清除历史标志</h2>
      <button @click="toggleClearHistoryFlag">
        {{ counterStore.clearHistoryFlag ? '关闭' : '开启' }} 清除历史
      </button>
    </div>

    <!-- 加载配置 -->
    <div class="form-section">
      <h2>加载配置</h2>
      <button @click="loadConfig" :disabled="isLoading">
        {{ isLoading ? '加载中...' : '加载API配置' }}
      </button>
    </div>

    <!-- 重置所有状态 -->
    <div class="form-section">
      <h2>重置</h2>
      <button @click="resetAll" class="reset-btn">重置所有状态</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useCounterStore } from '@/stores/counter'

// 使用 counter store
const counterStore = useCounterStore()

// 本地状态用于输入
const genderInput = ref('')
const outfitInput = ref('')
const locationInput = ref('')
const isLoading = ref(false)

// 同步初始值
onMounted(() => {
  genderInput.value = counterStore.gender
  outfitInput.value = counterStore.outfit
  locationInput.value = counterStore.location
})

// 设置性别
const setGender = () => {
  counterStore.setGender(genderInput.value)
}

// 设置服装
const setOutfit = () => {
  counterStore.setOutfit(outfitInput.value)
}

// 设置地点
const setLocation = () => {
  counterStore.setLocation(locationInput.value)
}

// 切换清除历史标志
const toggleClearHistoryFlag = () => {
  counterStore.setClearHistoryFlag(!counterStore.clearHistoryFlag)
}

// 加载配置
const loadConfig = async () => {
  try {
    isLoading.value = true
    await counterStore.loadConfig()
    alert('配置加载成功！')
  } catch (error) {
    alert('配置加载失败：' + error.message)
  } finally {
    isLoading.value = false
  }
}

// 重置所有状态
const resetAll = () => {
  counterStore.setGender('')
  counterStore.setOutfit('')
  counterStore.setLocation('')
  counterStore.setClearHistoryFlag(false)

  // 同步本地输入状态
  genderInput.value = ''
  outfitInput.value = ''
  locationInput.value = ''
}
</script>

<style scoped>
.counter-demo {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.status-section {
  background-color: #f5f5f5;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.status-item {
  margin-bottom: 0.5rem;
}

.form-section {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.form-section h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #333;
}

input,
select {
  padding: 0.5rem;
  margin-right: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

button {
  padding: 0.5rem 1rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

button:hover {
  background-color: #0056b3;
}

button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.reset-btn {
  background-color: #dc3545;
}

.reset-btn:hover {
  background-color: #c82333;
}
</style>
